<template>
  <div>
    <el-table :data="dataT" border height="calc(100vh - 280px)"
              :headerCellStyle="{
              'textAlign': 'center',
              'background': '#66b1ff',
              'color': 'white',
            }" :cellStyle="{ textAlign: 'center', 'font-size': '12px'}">
      <el-table-column prop="storeName" label="店铺名称"></el-table-column>
      <el-table-column>
        <template v-slot:default="scope">
          <el-table :data="scope.row.list" border
                    :headerCellStyle="{
              'textAlign': 'center',
              'background': '#66b1ff',
              'color': 'white',
            }" :cellStyle="{ textAlign: 'center', 'font-size': '12px'}">

            <el-table-column
                v-for="col in scope.row.list"
                :label="col.levelName"
            >
              <template v-slot:default="scope">{{ col.money }}</template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      dataT: [
        {
          "storeName": "测试灵芝",
          "financeName": null,
          "financeLevelId": 1,
          "levelName": "仓库人员生活费",
          "systemName": "零食很忙订单",
          "money": 1000,
          "deliveryDate": "2025-10-23"
        },
        {
          "storeName": "测试灵芝",
          "financeName": null,
          "financeLevelId": 2,
          "levelName": "仓库采购固定资产费",
          "systemName": "零食很忙订单",
          "money": 2000,
          "deliveryDate": "2025-10-23"
        },
        {
          "storeName": "测试灵芝",
          "financeName": null,
          "financeLevelId": 3,
          "levelName": "叉车费",
          "systemName": "零食很忙订单",
          "money": 4000,
          "deliveryDate": "2025-10-23"
        },
        {
          "storeName": "测试灵芝",
          "financeName": null,
          "financeLevelId": 9,
          "levelName": "私车公用",
          "systemName": "零食很忙订单",
          "money": 2000,
          "deliveryDate": "2025-10-23"
        },
        {
          "storeName": "测试灵芝",
          "financeName": null,
          "financeLevelId": 10,
          "levelName": "固定资产购买",
          "systemName": "零食很忙订单",
          "money": 2000,
          "deliveryDate": "2025-10-23"
        },
        {
          "storeName": "测试重庆乐尔乐",
          "financeName": null,
          "financeLevelId": 10,
          "levelName": "固定资产购买",
          "systemName": "零食很忙订单",
          "money": 2000,
          "deliveryDate": "2025-10-07"
        },
        {
          "storeName": null,
          "financeName": null,
          "financeLevelId": 1,
          "levelName": "仓库人员生活费",
          "systemName": "零食很忙订单",
          "money": 102,
          "deliveryDate": null
        },
        {
          "storeName": "测试订单111",
          "financeName": null,
          "financeLevelId": 19,
          "levelName": "零时工费用",
          "systemName": "零食优选订单",
          "money": 2,
          "deliveryDate": "2025-10-13"
        },
        {
          "storeName": null,
          "financeName": null,
          "financeLevelId": 1,
          "levelName": "仓库人员生活费",
          "systemName": null,
          "money": 1,
          "deliveryDate": null
        },
        {
          "storeName": null,
          "financeName": null,
          "financeLevelId": 2,
          "levelName": "仓库采购固定资产费",
          "systemName": null,
          "money": 1,
          "deliveryDate": null
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const data = this.dataT
      const grouped = Object.values(
          data.reduce((acc, cur) => {
            const key = `${cur.storeName || '无门店'}_${cur.deliveryDate || '无日期'}`;
            if (!acc[key]) {
              acc[key] = {
                storeName: cur.storeName,
                financeName: cur.financeName,
                financeLevelId: cur.financeLevelId,
                systemName: cur.systemName,
                deliveryDate: cur.deliveryDate,
                list: []
              };
            }
            acc[key].list.push({
              levelName: cur.levelName,
              money: cur.money
            });
            return acc;
          }, {})
      );

      this.dataT = grouped
      console.log(this.dataT)
      const data2 = [{
        name1: 'xxx',
        name2: 'xxx',
        name3: 'xxx',
        name4: 'xxx',
        money1: 10,
        money2: 10,
        money3: 10,
        money4: 10,
      }]
      const data3 = [
        {
          name1: 'xxx',
          money1: 10,
        },
        {
          name2: 'xxx',
          money2: 10,
        },
        {
          name3: 'xxx',
          money1: 10,
        },
        {
          name3: 'xxx',
          money1: 10,
        },
      ]

    }
  }
}
</script>

<style scoped>

</style>